<template>
	<view class="container">
		<page-header></page-header>
		 <swiper class="swiper"    :autoplay="swiperCfg.autoplay"
		 			:interval="swiperCfg.intervalSelect" :circular="swiperCfg.circular" v-if="sliders.length>0">
		 	<swiper-item  v-for="(item, index) in sliders">
		 		<a class="swiper-item uni-bg-red" :href="item.link">
		 			<image :src="item.thumb"></image>
		 			<view class="swiper-title" v-if="item.title">
		 				{{item.title}}
		 			</view>
		 		</a>
		 	</swiper-item>
		 </swiper>
		 <view class="cskill">
			 <view class="cskill-header">
				 <view class="cskill-header-title">
					 核心技术
				 </view>
			 </view>
			 <view class="cskill-body">
				 <view class="cskill-body-item" v-for="(item, index) in cskill" @click="navigatePost(item)">
					 <view class="cskill-body-item-thumb">
						 <image :src="item.logo"></image>
					 </view>
					 <view class="cskill-body-item-title">
						 {{ item.title }} 
					 </view>
				 </view>
			 </view>
		 </view>
		<view class="news">
			<view class="news-header">
				<view class="news-header-title">
					最新动态	
				</view>
				
			</view>
			<view class="news-list">
				<view class="news-list-item" v-for="(item, index) in news" @click="navigateNews(item)">
					<view class="news-list-item-left">
						<image :src="item.thumb"></image>
					</view>
					<view class="news-list-item-right">
						<view class="news-list-item-title">{{item.title}}</view>
						<view class="news-list-item-date">{{item.publish_time}}</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import pageHeader from '@/components/header/header.vue'
	import api from '@/api/index.js'
	
	export default {
		components:{
			pageHeader
		},
		data() {
			return {
				swiperCfg:{
					autoplay:true,
					intervalSelect:3000,
					circular:true,
				},	
				sliders:[
					'https://bcard.daokeyun.com/storage/images/ab9869ece095ff7be930a550cca0983b.jpg'
				],
				cskill:[
					{
						"id":1,
						"thumb":'https://case.daokeyun.com/storage/images/c0ba6a59699d6a251cfb0c721ad435dc.png',
						"title":"VR虚拟现实",
					},
					{
						"id":1,
						"thumb":'https://case.daokeyun.com/storage/images/2ae3063cba8261b64caecd0bb384d73c.png',
						"title":"VR虚拟现实",
					},{
						"id":1,
						"thumb":'https://bcard.daokeyun.com/storage/images/ab9869ece095ff7be930a550cca0983b.jpg',
						"title":"VR虚拟现实",
					},{
						"id":1,
						"thumb":'https://bcard.daokeyun.com/storage/images/ab9869ece095ff7be930a550cca0983b.jpg',
						"title":"VR虚拟现实",
					},{
						"id":1,
						"thumb":'https://bcard.daokeyun.com/storage/images/ab9869ece095ff7be930a550cca0983b.jpg',
						"title":"VR虚拟现实",
					},{
						"id":1,
						"thumb":'https://case.daokeyun.com/storage/images/49f99d4f3bc5067c9dc4cad67eb32a31.png',
						"title":"展厅规划设计",
					}
				],
				news:[
					{
						"id":1,
						"thumb":'https://bcard.daokeyun.com/storage/images/ab9869ece095ff7be930a550cca0983b.jpg',
						"title":"VR虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实虚拟现实",
						"date":"2023-10-18"
					}
				],
				
			}
		},
		onLoad(){
			this.getInfo();
			setTimeout(()=>{
				this.getShare();
			}, 500)
		},
		onShow(){
			console.log(window.location.href);
			//统计数据
			let interval = setInterval(()=>{
				 if(uni.getStorageSync('token')) {
					 clearInterval(interval);
					 api.getRequest('stat', {
					 	top:'service',
					 	sub:'',
					 	argv:''
					 });
				 }
			}, 50)
		},
		methods: {
			getInfo(){
				const that = this;
				api.getRequest('service', {}).then((res)=>{
					let response = res.data;
					that.sliders = response.sliders;
					that.cskill = response.skill
					that.news = response.news
				})
			},//核心技术页
			navigatePost(item){
				if(item.link) {
					console.log(item.link)
					window.location.href = item.link;
					return ;
					uni.navigateTo({
						url:'/pages/web/web?src='+encodeURIComponent(item.link)
					})
				}
				else {
					uni.navigateTo({
						url:'/pages/detail/detail?type=skill&id='+item.id
					})
				}
			},//最新动态页
			navigateNews(item){
				if(item.link) {
					console.log(item.link)
					window.location.href = item.link;
					return ;
					// uni.navigateTo({
					// 	url:'/pages/web/web?src='+encodeURIComponent(item.link)
					// })
				}
				else {
					uni.navigateTo({
						url:'/pages/detail/detail?type=news&id='+item.id
					})
				}
			},
			getShare(){
				 const that = this;	
				 let uuid = "";
				 if(this.$route.query.uuid) {
				 	uuid = this.$route.query.uuid;
				 	uni.setStorageSync('uuid', uuid)
				 }
				 else {
				 	uuid = uni.getStorageSync('uuid');
				 }
				 api.getRequest('shareData', {
				 	uuid:uuid,
					url:window.location.href
				 }).then((res)=>{
					 let response = res.data;
					 console.log('set setting', response);
					 
					 that.setShare(response.setting);
				 });
			},
			setShare(setting){
				let link = setting.shareLink;
				// if(uuid) link+='&uuid='+uuid;
				window.jWeixin.updateAppMessageShareData({ 
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				
				window.jWeixin.updateAppMessageShareData({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareAppMessage({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareTimeline({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
			}
		}
	}
</script>

<style scoped>
	
	.swiper{
		background-color: #fff;
		width: 100%;
		height: 350rpx;
	}
	swiper-item {
		width: 100%;
		height: 100%;
	}
	swiper-item image{
		width: 100%;
		height: 100%;
	}
	
	.swiper-item{
		width: 100%;
		height: 100%;
		display: block;
		text-decoration: none;
		position: relative;
	}
	.swiper-item image{
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	.swiper-title{
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.8);
		font-size: 20rpx;
		color: #fff;
		display: flex;
		align-items: center;
		height: 30rpx;
		padding: 20rpx;
		overflow: hidden;
	}
	.cskill{
		margin-top: 35rpx;
	}
	.cskill-header{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cskill-header-title{
		text-align: center;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 50rpx;
		background-image: url('/static/img/title-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.cskill-body{
		margin: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cskill-body .cskill-body-item{
		width: 215rpx;
		height: 215rpx;
		overflow: hidden;
		border-radius: 15rpx;
		margin-bottom: 25rpx;
		border: 1px solid #422163;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-image: -webkit-linear-gradient( 4deg, rgba(200,32,144, 0.212) 0%, rgba(106,20,209, 0.212) 100%);
		;
	}
	
	.cskill-body-item-thumb{
		height: 116rpx;
		width: 138rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	
	.cskill-body-item-thumb image{
		width: 110rpx;
		height: 100rpx;
	}
	.cskill-body-item-title{
		margin-top: 15rpx;
		color: #fff;
		font-weight: bold;
		font-size: 25rpx;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		word-break: break-all;
		padding: 0 10rpx;
	}
	
	
	.news{
		margin-top: 25rpx;
	}
	.news-header{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.news-header-title{
		text-align: center;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 50rpx;
		background-image: url('/static/img/title-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	.news-list{
		margin: 30rpx;
		padding-bottom: 100rpx;
	}
	.news-list .news-list-item{
		background-color: #3e3157;
		padding: 15rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.news-list-item .news-list-item-left{
		height: 158rpx;
		width: 284rpx;
		overflow: hidden;
		border-radius: 5rpx;
	}
	.news-list-item .news-list-item-left image{
		width: 100%;
		height: 100%;
	}
	.news-list-item-right{
		margin-left: 20rpx;
		width: 350rpx;
		display: flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: space-around;
		height: 158rpx;
	}
	 

	.news-list-item-title{
		color: #fff;
		font-size: 25rpx;
		line-height: 1.5em;
		font-weight: bold;
		overflow: hidden;
		
		text-overflow: ellipsis;
		
		display: -webkit-box;
		
		-webkit-line-clamp: 2;
		
		overflow:hidden;
		
		
		-webkit-box-orient: vertical;
	}
	.news-list-item-date{
		color: #7c7981;
		font-size: 18rpx;
	}
</style>
 

<style>
	@import '@/static/css/common.css';
	
</style>